<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card>
        <template #header>
          <el-row type="flex" justify="space-between">
            <el-col :span="12">
              <el-button size="small" type="primary" @click="addProperty">添加房产</el-button>
            </el-col>
            <el-col :span="12">
              <el-row type="flex">
                <el-select v-model="category" placeholder="全部分类">
                  <el-option :value="category" label="全部分类" />
                  <el-option v-for="item in allCategory" :key="item.id" :value="item.id" :label="item.title" />
                </el-select>
                <el-select v-model="agent" placeholder="全部经纪">
                  <el-option :value="agent" label="全部经纪" />
                  <el-option v-for="item in allAgent" :key="item.id" :value="item.id" :label="item.name" />
                </el-select>
                <el-input v-model="title_contains" placeholder="请输入关键字" />
                <el-button size="small" @click="searchTitle">搜索</el-button>
              </el-row>
            </el-col>
          </el-row>
        </template>
        <!-- 表格 -->
        <el-table border :data="tableDate">
          <el-table-column label="封面" prop="image" width="230px">
            <template v-slot="{row}">
              <img v-imgErr="require('@/assets/common/head.jpg')" :src="row.image" alt="" style="width:200px">
            </template>
          </el-table-column>
          <el-table-column label="标题" prop="title" />
          <el-table-column label="标签" prop="tags">
            <template v-slot="{row}">
              <!-- {{ row.tags }} -->
              <el-tag v-for="item in row.tags" :key="item.id" type="success">{{ item }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="地址" prop="address" />
          <el-table-column label="分类" prop="category.title" />
          <el-table-column label="经纪" prop="agent.name" />
          <el-table-column label="价格" prop="price" />
          <el-table-column label="介绍" prop="desc" />
          <el-table-column label="图片" prop="photos">
            <template v-slot="{row}">
              <img v-for="(item,index) in row.photos" :key="index" v-imgErr="require('@/assets/common/head.jpg')" :src="item" width="48px">
            </template>
          </el-table-column>
          <el-table-column label="操作" width="150px">
            <template v-slot="{row}">
              <el-button size="small" type="primary" @click="edit(row.id)">编辑</el-button>
              <el-button size="small" type="danger" @click="remove(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-row type="flex" justify="center">
          <el-pagination
            layout="prev, pager, next"
            :total="total"
            :page-size="limit"
            @current-change="CurrentChange"
          />
        </el-row>
      </el-card>
      <ProDialog ref="prodialog" :show-dialog.sync="proDia" :all-category="allCategory" :all-agent="allAgent" @renderList="getPropertyList" />
    </div>
  </div>
</template>

<script>
import { getProperty, getPropertyCount, removeProperty } from '@/api/property'
import ProDialog from './components/pro-dialog.vue'
import { filterCategory, filterAgent } from '@/filters/index'
export default {
  components: { ProDialog },
  // 处理图片
  directives: {
    imgErr: {
      inserted(el, bind) {
        el.addEventListener('error', function() {
          // console.log('图片报错', bind)
          el.src = bind.value
        })
        el.src = el.src || bind.value
      }
    }
  },
  data() {
    return {
      tableDate: [], // 指定条数房产列表
      total: 0, // 房产数量
      limit: 2, // 每页的条数
      start: 0, // 开始的位置
      proDia: false, // 对话框显示隐藏
      category: '', // 全部分类
      agent: '', // 全部经纪
      allProList: [],
      allCategory: [], // 全部分类列表
      allAgent: [], // 全部分类列表
      title_contains: '' // 搜索的标题

    }
  },
  created() {
    this.getPropertyList()
    this.allPropertyList()
  },
  methods: {
    // 筛选标题
    async searchTitle() {
      const searchTitle = { _limit: this.limit, _start: this.start, title_contains: this.title_contains }
      this.getPropertyList(searchTitle)
    },
    // 编辑
    edit(id) {
      this.proDia = true
      this.$refs.prodialog.getPropertyInfo(id)
    },
    // 删除信息
    remove(id) {
      this.$confirm('是否确认删除?', '提示', {
        type: 'warning'
      }).then(async() => {
        await removeProperty(id)
        if (this.tableDate.length === 1 && this.start !== 0) {
          const size = this.start / this.limit
          this.CurrentChange(size)
        } else {
          this.getPropertyList()
        }
        this.$message({
          message: '删除成功',
          type: 'success'
        })
      }).catch((err) => {
        console.log('取消', err)
      })
    },
    // 添加房产信息
    addProperty() {
      this.proDia = true
    },
    // 分页功能
    CurrentChange(start) {
      this.start = 0 + (start - 1) * this.limit
      this.getPropertyList()
    },
    // 获取房产列表
    async  getPropertyList(data) {
      const res = await getProperty(data || { _limit: this.limit, _start: this.start })
      const sult = await getPropertyCount(data)
      this.tableDate = res.data
      this.total = sult.data
    },
    async allPropertyList() {
      const all = await getProperty()
      this.allProList = all.data
      this.allCategory = filterCategory(all.data)
      this.allAgent = filterAgent(all.data)
    }

  }
}
</script>

<style>

</style>
